<template>
    <div class="video-list">
        <swiper :options="swiperOption">
            <swiper-slide v-for="(item , index) in dataList" :key="index">
                <div>
                    <videos ref="videos" :videoList="item"></videos>
                </div>
                <div class="infobar_warp">
                    <info-bar></info-bar>
                </div>
                <div class="rightbar-wrap">
                    <right-bar></right-bar>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
    import {swiper, swiperSlide} from 'vue-awesome-swiper'
    import Videos from '../../views/index/Videos.vue'
    import InfoBar from "../../components/index/infoBar.vue"
    import RightBar from "../../components/index/RightBar.vue"

    export default {
        name: "VideoList",
        data() {
            return {
                page:0,
                swiperOption: {
                    direction: "vertical",
                    grabCursor: true,
                    setWrapperSize: true,
                    autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
                    slidesPerView: 1,
                    mousewheel: true,
                    mousewheelControl: true,
                    height: window.innerHeight, // 高度设置，占满设备高度
                    resistanceRatio: 0,
                    observeParents: true,
                    onTap:()=>{
                        this.playActhion(this.page)
                    },
                    onSlideChangeStart:(swiperOption)=>{
                        this.StopVideo(this.page);
                       this.page=swiperOption.activeIndex;
//                       console.log(this.page+"Start")
                    },
                    onSlideChangeEnd:()=>{
                        this.PlayVideo(this.page)
//                        console.log(this.page+"END")
                    }
                },
                dataList: [
                    {
                        id: '1',
                        url: "http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/abb9595e74647defe21d748e12f7a7c9.mp4"
                    },
                    {
                        id: '2',
                        url: "http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4"
                    },
                    {
                        id: '3',
                        url: "http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/00b2141bff87cfaa75498f66214aeb9e.mp4"
                    },
                    {
                        id: '4',
                        url: "http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/9d9906ba474152307d7edca6bd72fbe2.mp4"
                    },
                    {
                        id: '5',
                        url: "http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/dc811d2c4d88b409063c7ea2065fe6a0.mp4"
                    }
                ]
            }
        },
        methods:{
            playActhion(index){
                this.$refs.videos[index].playOrStop();
            },
            PlayVideo(index){
                this.$refs.videos[index].videoPlay()
            },
            StopVideo(index){
                this.$refs.videos[index].videoStop()
            }

        },
        components: {
            Videos,
            swiper,
            swiperSlide,
            InfoBar,
            RightBar
        },
        mounted(){
              this.playActhion(this.page);
        }
    }
</script>

<style>
    .video-list {
        height: 100%;
    }

    .video-list >.swiper-container{
        height: 100%;
        position: relative;
    }
    .infobar_warp{
        position: absolute;
        bottom: 55px;
        left: 0;
    }
    .rightbar-wrap{
        position: absolute;
        right: 10px;
        bottom: 50px;
    }
</style>